.btn-float-right {
	float: right;
	position: relative;
	top: 4px;
}

.clearfix:after {
	clear: both;
	content: "";
	display: block;
}

.demo-content-packs {
	list-style: none;
	margin-left: -15px;
	margin-right: -15px;
	margin-top: 25px;
	transition: all 500ms;
	
	&:after {
		clear: both;
		content: "";
		display: block;
	}
	
	li {
		display: block;
		float: left;
		padding: 0;
		margin: 0;
		margin-bottom: 30px;
		width: 25%;
	}
}

.demo-content-packs .pack-entry {
	background: #fff;
	border: 1px solid #ccc;
	margin: 0 15px;
	transition: all 250ms;
	
	&:hover {
		background-color: #f5f5f5;
	}
	
	img {
		border-bottom: 1px solid #ccc;
		max-width: 100%;
		width: 100%;
	}
	
	.pack-details {
		padding: 10px 15px;
		padding-bottom: 15px;
	}
	
	.pack-details h3 {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.pack-details p {
		color: #888;
		font-size: 12px;
		margin-top: 10px;
		min-height: 55px;
	}
	
	.pack-details .button {
		display: block;
		text-transform: uppercase;
		padding: 2px 15px;
		height: auto;
		text-align: center;
	}
}

.demo-content-packs > li:nth-child(4n + 1) {
	clear: left;
}

#lab_demo_content_container .plugins-to-install {
	margin-top: 25px;
}

#lab_demo_content_container .plugins-to-install span {
	display: block;
	margin-top: 10px;
}
#lab_demo_content_container .plugins-to-install em {
	display: block;
	font-size: 11px;
	color: #888;
	font-style: normal;
}

#lab_demo_content_container .low-opacity {
	opacity: 0.25;
	pointer-events: none;
}

#media_downloads {
	display: inline-block;
	background: #2ea2cc;
	margin-top: 15px;
	border: 1px solid #0074a2;
	border-radius: 2px;
}

#media_downloads label {
	display: block;
	white-space: nowrap;
	padding: 6px 10px !important;
	color: #fff;
}


.lab-1cl-demo-installer-popup {
	@hpadding: 30px;
	
	font-family: 'Open Sans', sans-serif;
	
	form {
		margin: 0;
	}
	
	a {
		color: #0074A2;
		text-decoration: none;
		
		&:hover {
			text-decoration: underline;
		}
	}
	
	h2 {
		margin: 0;
		padding: 15px @hpadding;
		padding-bottom: 20px;
		font-weight: normal;
		border-bottom: 1px solid #dfdfdf;
		font-size: 20px;
		
		small {
			display: block;
			margin-top: 5px;
			font-size: 60%;
			color: #777777;
		}
	}
	
	.pack-details-entry {
		@cb-width: 30px;
		
		padding: 0;
		display: table;
		width: 100%;
		border-bottom: 1px solid #dfdfdf;
		transition: background 220ms;
		
		&:hover {
			background: #fafafa;
		}
		
		.cb,
		.details-title {
			display: table-cell;
			vertical-align: top;
			padding-top: 20px;
			padding-bottom: 20px;
			position: relative;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
		}
		
		.cb {
			width: @cb-width;
			padding-left: @hpadding;
		
			input {
				position: relative;
				top: 3px;
				transition: all 350ms;
				z-index: 1;
				
				&[disabled] {
					cursor: not-allowed;
				}
			}
			
			&:before {
				@pct: 1.5;
				
				
				content: '';
				display: block;
				position: absolute;
				width: 3px * @pct;
				height: 7px * @pct;
				border: solid #72C323;
				border-width: 0 2px 2px 0;
				transform: rotate(45deg);
				z-index: 10;
				left: @hpadding + 5;
				margin-top: 2px;
				opacity: 0;
			    transition: opacity 150ms;
			}
			
			&:after {				
				@s: 15px;
				
				content: '';
				display: block;
				width: @s;
				height: @s;
				position: relative;
				top: -15px;
				border-radius: 50%;
				border: 1px solid #ccc;
				border-top-color: #00b19d;
				animation: spinner .6s linear infinite;
			    -webkit-animation: spinner .6s linear infinite;
			    opacity: 0;
			    transition: opacity 150ms;
			}
					
			
			.error-close {
				position: absolute;
				background: transparent;
				width: 15px;
				height: 15px;
				left: @hpadding;
				top: 25px;
				z-index: 15;
				color: #c0392b;
				line-height: 1;
				opacity: 0;
				visibility: hidden;
				transition: all 350ms;
				
				&:before {
					content: '×';
					line-height: 0.5;
					text-align: center;
					font-size: 25px;
				}
			}
			
		}
		
		.details-title {
			float: left;
			padding-right: @hpadding;
			
			label {
				font-size: 13px;
				color: #777777;
				display: block;
				margin: 0;
				padding: 0;
				
				strong {
					display: block;
					padding-bottom: 3px;
					font-size: 15px;
					color: #444;
				}
			}
			
			.file-size {
				color: #999;
				font-size: 10px;
				position: relative;
				display: block;
				margin-top: 5px;
			}
		}
		
		.package-warning {
			display: block;
			margin-top: 15px;
			background-color: #feeccb;
			padding: 7px 10px;
			border-radius: 3px;
			font-size: 12px;
			user-select: all;
			-webkit-user-select: all;
			-moz-user-select: all;
			-ms-user-select: all;
			-o-user-select: all;
		}
		
		&.is-loading {
			
			.cb {
				
				input {
					opacity: 0;
					visibility: hidden;
				}
				
				&:after {
					opacity: 1;
				}
			}
		}
		
		&.is-finished {
			
			.cb {
				
				input {
					opacity: 0;
					visibility: hidden;
				}
				
				&:before {
					opacity: 1;
				}
			}
		}
		
		&.has-errors {
			
			.cb {
				
				input {
					opacity: 0;
					visibility: hidden;
				}
				
				.error-close {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
	
	form > .pack-details-entry:nth-last-of-type(2) {
		border-bottom: 0;
	}
	
	.button-container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 15px @hpadding;
		background-color: #f3f3f3;
		border-top: 1px solid #dddddd;
		z-index: 300;
		
		button {
			display: inline-block;
			line-height: 1;
			border-radius: 3px;
			background-color: #30ad63;
			color: #fff;
			border: 1px solid #259552;
			font-size: 13px;
			padding: 7px 10px;
			outline: none;
			transition: all 150ms;
			cursor: pointer;
			
			span {
				display: block;
				
				+ span {
					display: none;
				}
			}
			
			&.is-loading {
				
				span {
					display: none;
					
					+ span {
						display: block;
					}
				}
			}
			
			&:active {
				background-color: darken(#30ad63, 20%);
			}
			
			&.is-loading {
				opacity: 0.7;
				background-color: #30ad63;
				transition: all 350ms;
			} 
		}
	}
	
	.hidden {
		display: none;
	}
}

.lab-1cl-demo-success {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: fade(#fff, 90%);
	z-index: 1000;
	padding-top: 80px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	transition: 500ms all;
	overflow: auto;
	visibility: hidden;
	opacity: 0;
	
	.lab-1cl-success-visible & {
		visibility: visible;
		opacity: 1;
		overflow: auto;
	}
	
	.smiley,
	.sad {
		display: inline-block;
		width: 150px;
		height: 150px;
		background: url(img/smiley-happy.png) no-repeat;
		background-size: 100%;
		transform: scale(0.2);
		opacity: 0;
		transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
		transition-delay: 500ms;
		
		.lab-1cl-success-visible & {
			opacity: 1;
			transform: scale(1);
		}
		
		&.sad {
			background-image: url(img/smiley-sad.png);
		}
	}
	
	h2 {
		position: relative;
		margin: 0;
		font-size: 30px;
		margin-top: 40px;
		margin-bottom: 10px;
		top: -35px;
		opacity: 0;
		transition: all 500ms;
		transition-delay: 0.8s;
		font-weight: 400;
		
		.lab-1cl-success-visible & {
			opacity: 1;
			top: 0;
		}
	}
	
	> a {
		position: relative;
		font-size: 15px;
		text-decoration: none;
		color: #848484;
		opacity: 0;
		transition: all 1s;
		transition-delay: 1s;
		
		.lab-1cl-success-visible & {
			opacity: 1;
		}
		
		&:hover {
			text-decoration: underline;
		}
	}
	
	.errors-container {
		margin: 0 30px;
		margin-top: 40px;
		opacity: 0;
		visibility: hidden;
		text-align: center;
		transition: all 1s;
		transition-delay: 2s;
		
		.lab-1cl-errors-visible & {
			visibility: visible;
			opacity: 1;
		}
		
		span {
			display: block;
			font-size: 14px;
			color: #777;
			padding-bottom: 20px;
		}
		
		.error-entry {
			display: block;
			margin: auto;
			background-color: #feeccb;
			padding: 7px 10px;
			border-radius: 3px;
			font-size: 12px;
			user-select: all;
			-webkit-user-select: all;
			-moz-user-select: all;
			-ms-user-select: all;
			-o-user-select: all;
			margin-bottom: 10px;
			
			br {
				display: none;
			}	
		}
	}
}

@keyframes spinner {
    to {transform: rotate(360deg);}
}
 
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
}

.lab-democi-table-php-requirements {
	background: #fff;
	padding: 10px 0;
	border: 1px solid #ddd;
	margin-top: 20px;
	margin-bottom: 20px;
	
	.small {
		font-size: 11px;
		padding-top: 10px;
	}
	
	p {
		margin: 0;
		padding: 0;
		font-size: 12px;
		margin-bottom: 10px;
	}
	
	td, th {
		text-align: left;
		padding: 2px 15px;
	}
	
	.bold {
		font-weight: bold;
		
		td, th {
			font-weight: bold;
		}
	}
	
	.ok {
		color: #68B828;
	}
	
	.notok {
		color: #D5080F;
	}
}